<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		.cont {
			width: 606px;
			margin: 0 auto;
			text-align: center;
			padding: 50px;
			/*border: 1px solid black;*/
		}
		
		.btn {
			width: 200px;
			float: left;
			line-height: 50px;
			border: 1px solid black;
			background-color: rgb(217 217 217);
		}
		
		.cont :nth-child(1) {
			width: 200px;
			float: left;
			line-height: 50px;
			background-color: rgb(217 217 217);
			border-right: 1px solid;
		}
		
		.cont :nth-child(2) {
			width: 200px;
			float: left;
			line-height: 50px;
			background-color: rgb(217 217 217);
			border-right: 1px solid;
		}
		
		.but {
			margin: 0 auto;
			width: 602px;
			text-align: center;
			line-height: 200px;
		}
		
		.btn_one {
			width: 602px;
			position: absolute;
			background-color: #e0e0e0;
			top: 100px;
			left: 465px;
			border: 1px solid black;
		}
		
		.but :nth-child(1) {
			display: block;
		}
		
		.but :nth-child(2) {
			display: none;
		}
		
		.but :nth-child(3) {
			display: none;
		}
	</style>

	<body>
		<div class="cont">
		</div>
		<div class="but">
		</div>
	</body>

	<script>
		//2：使用let写一个原生的选项卡。（数据使用字符串模板进行遍历）；
		var str = `          
          <div class="btn_one">内容1</div>
          <div class="btn_one">内容2</div>
          <div class="btn_one">内容3</div>`
		document.querySelector(".but").innerHTML += str;
		var str1 = `          
          <div class="btn">盒子1</div>
          <div class="btn">盒子2</div>
          <div class="btn">盒子3</div>`
		document.querySelector(".cont").innerHTML += str1;

		var btn = document.querySelectorAll(".btn")
		var btn_one = document.querySelectorAll(".btn_one")
		for(let i = 0; i < btn.length; i++) {
			btn[i].onclick = function() {
				for(let j = 0; j < btn.length; j++) {
					btn_one[j].style.display = "none";
				}
				btn_one[i].style.display = "block";
			}
		}
	</script>

</html>